<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻中国</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
  <div id="top_login">
      <form th:action="@{/login}" method="post">
        <label> 登录名 </label>
        <input type="text" id="uname" name="uname" class="login_input" />
        <label> 密&#160;&#160;码 </label>
        <input type="password" id="upwd" name="upwd" class="login_input" />
        <input type="submit" class="login_sub" value="登录"/>
      </form>
    <label id="error"> </label>
    <img src="images/friend_logo.gif" alt="Google" id="friend_logo" />
  </div>
  <div id="nav">
    <div id="logo"> <img th:src="@{/images/logo.jpg}" alt="新闻中国" /> </div>
    <div id="a_b01"> <img th:src="@{/images/a_b01.gif}" alt="" /> </div>
    <!--mainnav end-->
  </div>
</div>
<div id="container">
  <div class="sidebar">
    <h1> <img src="images/title_1.gif" alt="国内新闻" /> </h1>
    <div class="side_list">
      <ul>
          <li th:each="news:${newsList1}"><a th:href="@{/index/readnews/{nid}(nid=${news.nid})}"><b th:text="${news.ntitle}"></b> </a> </li>
        <!--<li> <a href='#'><b> 景区，如何不再依靠门票收入 </b></a> </li>
        <li> <a href='#'><b> 高考期间中东部地区将现大范围降雨 </b></a> </li>
        <li> <a href='#'><b> 山西离柳焦煤集团井下人行车发生事故6人死亡 </b></a> </li>-->
      </ul>
    </div>
    <h1> <img src="images/title_2.gif" alt="国际新闻" /> </h1>
    <div class="side_list">
      <ul>
          <li th:each="news:${newsList2}"><a th:href="@{/index/readnews/{nid}(nid=${news.nid})}"><b th:text="${news.ntitle}"></b> </a> </li>
        <!--<li> <a href='#'><b> 习近平在墨国会发表演讲:朋友要老 好酒要陈 </b></a> </li>
        <li> <a href='#'><b> 普京逮捕铁腕市长展示肌肉向世人表明克宫仍大权在握</b></a> </li>
        <li> <a href='#'><b> 潘基文祝贺赖斯被任命为美国国家安全顾问 </b></a> </li>
        <li> <a href='#'><b> 与基地有关组织宣称对巴格达连环爆炸负责 </b></a> </li>-->
      </ul>
    </div>
    <h1> <img src="images/title_3.gif" alt="娱乐新闻" /> </h1>
    <div class="side_list">
      <ul>
          <li th:each="news:${newsList3}"><a th:href="@{/index/readnews/{nid}(nid=${news.nid})}"><b th:text="${news.ntitle}"></b> </a> </li>
        <!--<li> <a href='#'><b> "星跳水立方"决战临近 陈楚生被华谊要求进前三 </b></a> </li>
        <li> <a href='#'><b> 《新恋爱时代》登东方卫视 《非诚》元素遭删除 </b></a> </li>
        <li> <a href='#'><b> 《海角七号》导演新片开机 吴宇森等出席 </b></a> </li>
        <li> <a href='#'><b> 《致命黑兰》佐伊坐拥7种武器 暴力登陆全国院线 </b></a> </li>-->
      </ul>
    </div>
  </div>
  <div class="main">
    <div class="class_type"> <img th:src="@{images/class_type.gif}" alt="新闻中心" /> </div>
    <div class="content">
      <ul class="class_date">
        <li id='class_month'>
            <a href='javascript:;'  th:id="${topic.tid}" th:each="topic:${topics}"><b th:text="${topic.tname}"></b></a>
        </li>
      </ul>
      <ul class="classlist">
          <!--<li th:each="news,status:${newsList}">
              <b th:text="${status.count}"></b>
              <a th:href="@{/index/readnews/{nid}(nid=${news.nid})}" th:text="${news.ntitle}"></a>
              <span th:text="${#dates.format(news.ncreateDate,'yyyy-MM-dd HH:mm:ss')}"></span>
              <div th:if="${status.count%5==0}"><p class="space"></p></div>
          </li>-->
        <!--<p align="right"> 当前页数:[1/2]&nbsp; <a href="javascript:;" onclick="getPage()">下一页</a> <a href="#">末页</a> </p>-->
      </ul>
    </div>
    <div class="picnews">
      <ul>
        <li> <a href="#"><img src="images/Picture1.jpg" width="249" alt="" /> </a><a href="#">幻想中穿越时空</a> </li>
        <li> <a href="#"><img src="images/Picture2.jpg" width="249" alt="" /> </a><a href="#">国庆多变的发型</a> </li>
        <li> <a href="#"><img src="images/Picture3.jpg" width="249" alt="" /> </a><a href="#">新技术照亮都市</a> </li>
        <li> <a href="#"><img src="images/Picture4.jpg" width="249" alt="" /> </a><a href="#">群星闪耀红地毯</a> </li>
      </ul>
    </div>
  </div>
</div> 
<div id="footer">  
<!-- <iframe src="index-elements/index_bottom.html" scrolling="no" frameborder="0" width="947px" height="190px"></iframe>-->
    <div id="friend">
        <h1 class="friend_t"> <img src="images/friend_ico.gif" alt="合作伙伴" /> </h1>
        <div class="friend_list">
            <ul>
                <li> <a href="#">百度</a> </li>
                <li> <a href="#">谷歌</a> </li>
                <li> <a href="#">新浪</a> </li>
                <li> <a href="#">网易</a> </li>
                <li> <a href="#">搜狐</a> </li>
                <li> <a href="#">人人</a> </li>
                <li> <a href="#">中国政府网</a> </li>
            </ul>
        </div>
    </div>
    <div>
        <p class=""> 24小时客户服务热线：010-68988888 &#160;&#160;&#160;&#160; <a href="#">常见问题解答</a> &#160;&#160;&#160;&#160; 新闻热线：010-627488888 <br />
            文明办网文明上网举报电话：010-627488888 &#160;&#160;&#160;&#160; 举报邮箱： <a href="#">jubao@jb-hisoft.com.cn</a> </p>
        <p class="copyright"> Copyright &copy; 1999-2009 News China gov, All Right Reserver <br />
            新闻中国 版权所有 </p>
    </div>

</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    //分页
    var currPageNo=1;
    function getPage(pageNo){
        $("#pagebar").remove();
        $(".classlist").empty();
        $.ajax({//局部刷新
            url:'/newschina/index/pagenews/?pageNo='+pageNo,
            type:'get',
            dataType:'json',
            success:function (page){
                var data=page.newsList;
                $(data).each(function (i){
                    var $li = $("<li><b>"+(i+1)+".</b><a href='/newschina/index/readnews/"+this.nid+"'>"+this.ntitle+"</><span>"+this.ncreateDate+"</span></li>");
                    $(".classlist").append($li);
                    if((i+1)%5==0){
                        $(".classlist").append("<li class='space'></li>");
                    }
                });
                var $p = $("<p align=\"right\" id='pagebar'> 当前页数:["+page.pageNo+"/"+page.totalPageCount+"]&nbsp; <a href=\"javascript:;\" onclick='getPage(1)'>首页</a> <a href=\"javascript:;\" onclick=\"getPage("+(page.pageNo-1)+")\">上一页</a> <a href=\"javascript:;\" onclick=\"getPage("+(page.pageNo+1)+")\">下一页</a> <a href=\"javascript:;\" onclick='getPage("+page.totalPageCount+")'>末页</a> </p>");
                $(".content").append($p);
            }
        })
    }

    $(function (){
        getPage(1);
        $("#class_month a").click(function (){
            $('.classlist').empty();
            //location.href="/newschina/?tid="+$(this).attr("id")
            $.ajax({//局部刷新
                url:'/newschina/index/topicnews/'+$(this).attr("id"),
                type:'get',
                dataType:'json',
                success:function (data){
                    $(data).each(function (i){
                        var $li = $("<li><b>"+(i+1)+".</b><a href='/newschina/index/readnews/"+this.nid+"'>"+this.ntitle+"</><span>"+this.ncreateDate+"</span></li>");
                        $(".classlist").append($li);
                        if((i+1)%5==0){
                            $(".classlist").append("<p class='space'></p>");
                        }
                    });
                }
            })
        });
    })
</script>
</body>
</html>
	